<template>
    <div>
      <div class="product-en main-width">
        <span class="theme-color theme-border-color">CONTACT</span>
      </div>
      <ul class="page-nav main-width">
        <!--<li><a href="#">联系方式</a></li>-->
        <!--<li><a href="#">订阅分享</a></li>-->
      </ul>

      <div class="div-link-all main-width">
      <div class="two-part-left part">
        <div class="address-box">
          <img src="~static/img/contact/position-icon.png" alt="">
          <div class="address-content" id="address">
            <p>{{webInfo.web_copyright}}</p>
            <p>{{webInfo.address}}</p>
            <p>{{webInfo.phone}}</p>
          </div>
        </div>
        <div class="address-img"></div>
      </div>
      <div class="two-part-right part health-china">
        <!-- <img src="/img/contact/contact-right.png" alt="" class=""> -->
        <!--<div class="two-part-right-l">-->
          <!--<img :src="webInfo.code" alt="" id="code">-->
          <!--<p>关注天赋能健康产业公众号获取最新动态</p>-->
        <!--</div>-->
        <!--<div class="two-part-right-r">-->
          <!--<p class="line-1">HEALTH OF CHINA</p>-->
          <!--<p class="line-2">专注健康产业 / 助力健康中国</p>-->
          <!--<p class="line-3">SINCE 1998</p>-->
        <!--</div>-->
      </div>
    </div>
    </div>
</template>

<script>
  export default {
    name: 'contact',
    async asyncData({ $axios }) {
      const webInfo = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_web');
      return {webInfo}
    },
  }
</script>

<style scoped lang="less">
  .div-link-all{
    height:3.24rem;
    /*height:3.84rem;*/
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 0.15rem;
    margin-top: 0.7rem;
  }
  .two-part-left{
    width: 43%;
    background: #dededc;
    display: flex;
    flex-flow: column nowrap;
  }
  .part{
    height:100%;
    position: relative;
  }
  .address-box{
    height:1.6rem;
    width: 100%;
    font-size: 0.15rem;
    display: flex;
    flex-flow: row nowrap;
    box-sizing:border-box;
    padding:0.18rem;
    align-items: center;
  }
  .address-box img{
    width: 0.478rem;
  }
  .address-content{
    margin-left: 0.18rem;
  }
  .address-content p{
    margin-top: 0.1rem;
  }
  .address-content p:first-child{
    margin: 0;
  }
  .address-img{
    flex: 1;
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    background-image:url("~static/img/contact/jt.jpg");

  }
  .two-part-right{
    width: 56%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding:0.56rem;
    box-sizing: border-box;
    color:#fff;
    text-align: center;
    /*background: url("~static/img/contact/contact-right.png");*/
  }
  .health-china{
    // width: 100%;
    background: url('~static/img/contact/contact-right.png') no-repeat center center /cover;
  }
  .two-part-right-l{
    width: 1.41rem;
    font-size: 0.1rem;
  }
  .two-part-right-l img{
    width: 100%;
    margin-bottom: 0.02rem;
  }
  .two-part-right-r{
    flex: 1;
    text-align: right;
  }
  .line-1{
    font-size: 0.2rem;
    font-weight: bold;
  }
  .line-2 {
    font-size: 0.24rem;
    margin: 0.05rem 0;
  }
  .line-3{
    font-size: 0.2rem;
  }
</style>
